<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <link rel="stylesheet" href="{$oss}web/invitate_input_record/css/mui.min.css"/>
    <link rel="stylesheet" href="{$oss}web/invitate_input_record/css/mui.picker.min.css?v=1"/>
    <link rel="stylesheet" href="/static/vip/css/common.css?v=20242041622">
    <link rel="stylesheet" href="/static/ai_active/css/recode.css?v=20242041622"/>
    <style>
        body {
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
<div class="container">
    <!--顶部图片-->
    <div id="tab-2" class="wrapper_content">
        <div class="tab-title">添加档案</div>
        <div class="tab-des">填写详细出生日期，获取专属服务</div>
        <!--输入内容部分-->
        <div class="content_container">
            <img class="user_img" src="{$record.avatar}">
            <form action="##" onsubmit="return false" class="form" method="post" id="form">
                <div class="item_con">
                    <div class="title">昵称</div>
                    <div class="item_right_con">
                        <input class="input_con" type="text" id="name" name="name" value="{$record.name}" autocomplete="off">
                    </div>
                </div>
                <div class="item_con select-comments">
                    <div class="title">标签选择</div>
                    <div class="arrow-page arrow"></div>
                </div>
                <div class="item_con tag-list" style="display: none">
                    <div class="sex_con" style="flex-wrap: wrap">
                        <div class="comments sex sex_last sex_selected" style="margin-bottom: 1rem;">自己</div>
                        <div class="comments sex sex_last" style="margin-bottom: 1rem;">恋人</div>
                        <div class="comments sex sex_last" style="margin-bottom: 1rem;">朋友</div>
                        <div class="comments sex sex_last" style="margin-bottom: 1rem;">亲友</div>
                        <div class="comments sex sex_last" style="margin-bottom: 1rem;">工作</div>
                        <div class="comments sex sex_last" style="margin-bottom: 1rem;">客户</div>
                        <div class="comments sex sex_last" style="margin-bottom: 1rem;">案例</div>
                        <div class="comments sex sex_last" style="margin-bottom: 1rem;">其他</div>
                    </div>
                </div>
                <div class="item_con">
                    <div class="title">性别选择</div>
                    <div class="sex_con">
                        <div id="sex_male" class="sex" onclick="actionSex(1)">男</div>
                        <div id="sex_female" class="sex sex_last sex_selected" onclick="actionSex(2)">女</div>
                    </div>
                </div>
                <div class="item_con">
                    <div class="title">出生时间</div>
                    <div class="item_right_con">
                        <input class="input_con" id="timeResult"
                               data-options="{&quot;value&quot;:&quot;{$record.year.'-'.$record.month.'-'.$record.day.' '.$record.hour.':'.$record.minute}&quot;,&quot;beginYear&quot;:1900,&quot;endYear&quot;:2099}"
                               name="birth_time" placeholder="出生时间（公历）" type="text"
                               value="{$record.year.'-'.$record.month.'-'.$record.day.' '.$record.hour.':'.$record.minute}"
                               readonly="true" unselectable="on">
                        <div class="arrow"></div>
                    </div>
                </div>
                <div class="item_con">
                    <div class="title">出生地点</div>
                    <div class="item_right_con" id='showCityPickerBirth'>
                        <input class="input_con" id='cityResultBirth' type="text" name="birth_place" placeholder=""
                               value="{$record.birth_country.'-'.$record.birth_province.'-'.$record.birth_city}" readonly="true"
                               unselectable="on">
                        <div class="arrow"></div>
                    </div>
                </div>

                <div class="item_con">
                    <div class="title">现居城市</div>
                    <div class="item_right_con" id='showCityPickerNow'>
                        <input class="input_con" id='cityResultNow' type="text" name="live_place" placeholder=""
                               value="{$record.live_country.'-'.$record.live_province.'-'.$record.live_city}" readonly="true"
                               unselectable="on">
                        <div class="arrow"></div>
                    </div>
                </div>
                <input type="hidden" id="avatar" name="avatar" value="{$record.avatar}">
                <input type="hidden" id="comments" name="comments" value="{$record.comments}">
                <input type="hidden" id="sex" name="sex" value="{$record.type}">
                <input type="hidden" id="year" name="year" value="{$record.year}">
                <input type="hidden" id="month" name="month" value="{$record.month}">
                <input type="hidden" id="day" name="day" value="{$record.day}">
                <input type="hidden" id="hour" name="hour" value="{$record.hour}">
                <input type="hidden" id="minute" name="minute" value="{$record.minute}">
                <input type="hidden" id="birth_country" name="birth_country" value="{$record.birth_country}">
                <input type="hidden" id="birth_province" name="birth_province" value="{$record.birth_province}">
                <input type="hidden" id="birth_city" name="birth_city" value="{$record.birth_city}">
                <input type="hidden" id="live_country" name="live_country" value="{$record.live_country}">
                <input type="hidden" id="live_province" name="live_province" value="{$record.live_province}">
                <input type="hidden" id="live_city" name="live_city" value="{$record.live_city}">
                <input type="hidden" id="long_deg" name="long_deg" value="{$record.long_deg}">
                <input type="hidden" id="long_min" name="long_min" value="{$record.long_min}">
                <input type="hidden" id="ew" name="ew" value="{$record.ew}">
                <input type="hidden" id="lat_deg" name="lat_deg" value="{$record.lat_deg}">
                <input type="hidden" id="lat_min" name="lat_min" value="{$record.lat_min}">
                <input type="hidden" id="ns" name="ns" value="{$record.ns}">
            </form>
        </div>
        <div class="input_hint">时区默认为东八区，大陆地区夏令时自动判断</div>
        <div class="btn_ok" onclick="checkForm()">完成添加</div>
    </div>
</div>
<div id="shadow" class="shadow"></div>
<div id="loading">
    <img src="{$oss}web/invitate_input_record/images/loading.gif" alt="">
</div>
<script src="/static/jquery-3.1.1.min.js"></script>
<script src="{$oss}web/invitate_input_record/js/mui.min.js"></script>
<script src="{$oss}web/invitate_input_record/js/city.data-xzns.js"></script>
<script src="{$oss}web/invitate_input_record/js/mui.picker.min.js?v=1"></script>
<script src="{$oss}web/invitate_input_record/js/mui.poppicker.js"></script>
<script>
    var is_user_have_record = 1;
    var record = JSON.parse('{:json_encode($record)}');
    var localRecord = JSON.parse(localStorage.getItem("localRecord"));
    window.header = JSON.parse(`{$header}`);
    if (localRecord !== null) {
        // 本地记录覆盖服务器默认值
        record = localRecord;
        // console.log('localRecord=', localRecord);
        // console.log('record=', record);
        // 准备初始化本地存储的档案信息到表单中
        $("#timeResult").val(record.birth_time).attr('data-options', "{\"value\": \"" + record.birth_time + "\", \"beginYear\": 1900, \"endYear\": 2099}");
        $('#cityResultBirth').val(record.birth_place)
        $('#cityResultNow').val(record.live_place)
        $("#name").val(record.name)
        $("#comments").val(record.comments)
        $("#avatar").val(record.avatar)
        $("#sex").val(record.sex)
        $("#year").val(record.year)
        $("#month").val(record.month)
        $("#day").val(record.day)
        $("#hour").val(record.hour)
        $("#minute").val(record.minute)
        $("#birth_country").val(record.birth_country)
        $("#birth_province").val(record.birth_province)
        $("#birth_city").val(record.birth_city)
        $("#live_country").val(record.live_country)
        $("#live_province").val(record.live_province)
        $("#live_city").val(record.live_city)
        $("#long_deg").val(record.long_deg)
        $("#long_min").val(record.long_min)
        $("#ew").val(record.ew)
        $("#lat_deg").val(record.lat_deg)
        $("#lat_min").val(record.lat_min)
        $("#ns").val(record.ns)

        var sex_male = $('#sex_male')[0], sex_female = $('#sex_female')[0], sex_element = $('#sex')[0];

        sex_element.value = record.sex;
        //先设置为未选中状态
        sex_male.className = 'sex';
        sex_female.className = 'sex sex_last';
        if (1 == record.sex) {
            sex_male.className += ' sex_selected';
        } else {
            sex_female.className += ' sex_selected';
        }
    } else {
        console.log("localRecord=null");
    }
</script>
<script src="/static/invitate_input_record/js/time.place.js"></script>
<script>
    //表单提交
    function checkForm() {
        var form = document.getElementById('form'),
            avatar = form.avatar.value,
            comments = form.comments.value,
            name = form.name.value,
            sex = form.sex.value,
            year = form.year.value,
            birth_city = form.birth_city.value;
        if (!name.trim()) {
            alert("请填写昵称");
            return false;
        }
        if (!comments.trim()) {
            alert("请选择标签");
            return false;
        }
        if (!sex.trim()) {
            alert("请选择性别");
            return false;
        }
        if (!avatar.trim()) {
            alert("请上传头像");
            return false;
        }

        if (!year.trim()) {
            alert("请填写出生时间");
            return false;
        }
        if (!birth_city.trim()) {
            alert("请填写出生地点");
            return false;
        }
        document.getElementById('shadow').style.display = 'block';
        document.getElementById('loading').style.display = 'block';
        let userInfo = JSON.parse(localStorage.getItem("user-login"));
        if (userInfo) {
            window.header = {
                'user-access-token': userInfo.user_access_token, 'has-self-recode': userInfo.has_self_recode
            }
        }
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "{:url('saveRecode')}",
            data: $('#form').serialize(),
            headers: window.header,
            success: function (result) {
                document.getElementById('shadow').style.display = 'none';
                document.getElementById('loading').style.display = 'none';
                if (result.code === 200) {
                    location.replace('{$domain}/web/ai_active/aiAnswer2024?id={$ai_id}')
                    return false;
                } else {
                    alert(result.msg);
                }
            },
            error: function (result) {
                document.getElementById('shadow').style.display = 'none';
                document.getElementById('loading').style.display = 'none';
                alert(result.msg);
            }
        });
        return false;
    }

    //选择性别事件
    function actionSex(sex) {
        var sex_male = $('#sex_male')[0], sex_female = $('#sex_female')[0], sex_element = $('#sex')[0];

        sex_element.value = sex;
        //先设置为未选中状态
        sex_male.className = 'sex';
        sex_female.className = 'sex sex_last';
        if (1 == sex) {
            sex_male.className += ' sex_selected';
        } else {
            sex_female.className += ' sex_selected';
        }
    }

    $(document).on('click', '.select-comments', function () {
        $(".tag-list").toggle(function () {
            let show = $('.tag-list').css('display')
            if (show === 'none') {
                // 元素隐藏时执行的代码
                $('.select-comments .arrow-page').addClass('arrow')
                $('.select-comments .arrow-page').removeClass('arrow2')
                $('.select-comments').removeClass('item_con_without_boder_bottom')
            } else {
                // 元素显示时执行的代码
                $('.select-comments .arrow-page').addClass('arrow2')
                $('.select-comments .arrow-page').removeClass('arrow')
                $('.select-comments').addClass('item_con_without_boder_bottom')
            }
        });
    })

    $(document).on('click', '.tag-list .comments', function () {
        var obj = $(this);
        let comments = obj.text()
        let comments_element = $('#comments')[0];
        // comments_element.value = comments;
        comments_element.value = '自己';
        //先设置为未选中状态
        // obj.addClass('sex_selected');
        // obj.siblings('.comments').removeClass('sex_selected');
    })
</script>
{include file="../apps/web/view/public/sensors.html" /}
<script>
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=1279238006&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
</body>
</html>
